/*
 * @Author: your name
 * @Date: 2021-12-25 16:50:31
 * @LastEditTime: 2021-12-25 18:29:41
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\50htmljs\clock\script.js
 */

const toggle = document.getElementsByClassName('toggle')[0]
const hourEl = document.getElementsByClassName('hour')[0]
const minuteEl = document.getElementsByClassName('minute')[0]
const secondEl =  document.getElementsByClassName('second')[0]
const dateEl =  document.getElementsByClassName('date')[0]
const timeEl = document.getElementsByClassName('time')[0]


const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
const months = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];

toggle.addEventListener('click',(e)=>{
    // console.log(e)
    const html = document.querySelector('html')
    if (html.classList.contains('dark')) {
        html.classList.remove('dark')
        e.target.innerHTML = '白天'
    }else{
        html.classList.add('dark')
        e.target.innerHTML = '黑夜'   
    }

})

function setTime(){
    const time= new Date()
    const month = time.getMonth()//月份
    const day = time.getDay() //一周某一天
    const date = time.getDate() //一个月某一天
    const hours = time.getHours()//小时
    const hoursForClock = hours >= 13 ? hours % 12 : hours;
    const minutes = time.getMinutes()//分钟
    const seconds = time.getSeconds()//秒
    const ampm = hours >= 12 ? 'PM' : 'AM'

    hourEl.style.transform = `translate(-50%,-100%) rotate(${scale(hoursForClock,0,12,0,360)}deg)`
    minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
    secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`

    timeEl.innerHTML = `${hoursForClock}:${minutes < 10  ? `0${minutes}` : minutes} ${ampm}`
    dateEl.innerHTML = `${days[day]},${months[month]} <span class="circle">${date}号</span>`

}

const scale = (num, in_min, in_max, out_min, out_max) => {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

setTime()
setInterval(setTime, 1000)
